import React,{FC,useEffect} from 'react';
import {useDispatch,useSelector,QuestionModelState,UserModelState} from 'umi';
import {Form,Input,Button,Select,message} from 'antd';
import Editor from 'for-editor';
// import {QuestionModelState} from '@/models/question';

const { Option } = Select;

const layout = {
    labelCol: { span: 2 },
    wrapperCol: { span: 15 },
};
const tailLayout = {
    wrapperCol: { offset: 2, span: 2 },
};

const AddQuestion:FC = () => {
    const dispatch = useDispatch();

    const [form] =  Form.useForm();

    useEffect(() => {
        //获取考试类型
        dispatch({
            type:'question/getExamType'
        })
        //获取课程类型
        dispatch({
            type:'question/getSubject'
        })
        //获取试题类型
        dispatch({
            type:'question/getQuestionsType'
        })
    },[])
    

    const {examType,subjects,questionType,userInfo} = useSelector((model:{question:QuestionModelState,user:UserModelState}) => {
       return {...model.question,...model.user}
    });

    useEffect(() => {
        let values:{[propname:string]:any} = {};
        if(examType.length){
            values.exam_id = examType[0].exam_id
        }

        if(subjects.length){
            values.subject_id = subjects[0].subject_id;
        }

        if(questionType.length){
            values.questions_type_id = questionType[0].questions_type_id;
        }

        console.log("===useEffect===",form,values)


        form.setFieldsValue({
            ...values
        })

    },[examType,subjects,questionType])

    //表单通关校验之后的回调函数
    const onFinish = (values: any) => {
        console.log('Success:', values,"user_id",userInfo.user_id);
        //调添加试题的接口 ,成功的提示  错误提示  c重置表单信息
        let result:any = dispatch({
            type:'question/addQuestion',
            payload:{...values,user_id:userInfo.user_id}
        })

        result.then((res:{code:number,msg:string}) => {
            if(res.code === 1){
                message.success("添加试题成功",1000);
                //重置表单信息
                form.resetFields()
            }
        })
    };
    
    return <div>
        <Form
            {...layout}
            name="basic"
            form={form}
            onFinish={onFinish}
            >
            <h3>题干</h3>
            <Form.Item
                name="title"
                rules={[{ required: true, message: '请输入题干' }]}
            >
                <Input />
            </Form.Item>
            <h3>题目主题</h3>
            <Form.Item
                name="questions_stem"
                rules={[{ required: true, message: '请输入题目主题' }]}
            >
                <Editor />
            </Form.Item>

            <h3>请选择考试类型</h3>
            <Form.Item
                name="exam_id"
                rules={[{ required: true, message: '请选择考试类型' }]}
            >
                {examType.length && <Select  style={{ width: 120 }}>
                    {examType.map(item => <Option value={item.exam_id} key={item.exam_id}>{item.exam_name}</Option>)}
                </Select>}
                
            </Form.Item>

            <h3>请选择课程类型</h3>
            <Form.Item
                name="subject_id"
                rules={[{ required: true, message: '请选择课程类型' }]}
            >
                {subjects.length && <Select style={{ width: 120 }}>
                    {subjects.map(item => <Option value={item.subject_id} key={item.subject_id}>{item.subject_text}</Option>)}
                </Select>}
            </Form.Item>

            <h3>请选择题目类型</h3>
            <Form.Item
                name="questions_type_id"
                rules={[{ required: true, message: '请选择题目类型' }]}
            >
                {questionType.length && <Select style={{ width: 120 }}>
                    { questionType.map(item => <Option value={item.questions_type_id} key={item.questions_type_id}>{item.questions_type_text}</Option>)}
                </Select> }
            </Form.Item>

            <h3>答案信息</h3>
            <Form.Item
                name="questions_answer"
                rules={[{ required: true, message: '请输入答案信息' }]}
            >
                <Editor />
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Button type="primary" htmlType="submit">
                    提交
            </Button>
        </Form.Item>
    </Form>
    </div>
}

export default AddQuestion